<template>
   <el-form :inline="true" :model="formData" class="demo-form-inline">
       <el-form-item label="编号" style="font-weight: 700;">
         <el-input v-model="formData.id" placeholder="请输入类目编号" clearable />
       </el-form-item>
       <el-form-item label="名称" style="font-weight: 700;">
            <el-input v-model="formData.name" placeholder="请输入类目名称" clearable/>
          </el-form-item>
       <el-form-item label="批量查询" style="font-weight: 700;">
            <el-input v-model="formData.ids" placeholder="请输入类目编号" clearable/>
         </el-form-item>
      
          <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
     </el-form>
   <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="编号" width="150" />
    <el-table-column prop="name" label="类目名称" width="120" />
    <el-table-column prop="img" label="图片" width="120" >
      <!--添加图片样式需要使用模板插值-->
      <template #default="scope">
         <img :src="scope.row.img" alt="" width="50px" height="50px">
      </template>
    </el-table-column>
    <el-table-column prop="seq" label="排序" width="120" />
    
    <el-table-column fixed="right" label="操作" width="140">
      <template #default="scope">
        <el-button type="warning" size="small" @click="offineclick(scope.row)"
          >下线</el-button
        >
        <el-button type="danger" size="small" @click="handleClick(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
         background 
          layout="total, prev, pager,next"
         :page-size="pageData.pageSize"
         :total="pageData.total"
         @current-change="currentChange"
       />
</template>
<script setup lang="ts">
//import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import {CategoryApi} from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router=useRouter()
const tableData = ref([{}])
const formData = reactive(
   {
      name: '',
      id: '',
      ids:[]
   
   }
)
//分页的对象
const pageData = reactive({
   total:0, //总条数
   pageSize: 4,  //每页显示的数据
   pageNum:1  //第几页
})

onMounted(() => { 
  CallCategoryApi()
})


const CallCategoryApi = () => { 
   const id = formData.id == '' ? undefined : formData.id
   const name = formData.name == '' ? undefined : formData.name
   const ids =formData.ids[0]==0 ? undefined : formData.ids
   CategoryApi.select.call({
      id: id, name: name, ids: ids,
      pageNum: pageData.pageNum,
      pageSize:pageData.pageSize
   }).then((res: any) => { 
      console.log(res);
      tableData.value=res.items
      pageData.total=res.total
   })
}
//查询的按钮
const onSubmit = () => {
   //console.log('submit!')
   CallCategoryApi()
}

const offineclick = (row:any)=>{ 
   ElMessageBox.confirm(
      '您是要对：'+row.name+' 下线吗？',
      '警告',
      {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(() => {
         CategoryApi.delete.call({ id: row.id }).then((res: any) => { 
            console.log(res);
            
            ElMessage({
               type: 'success',
               message: '恭喜您下线成功',
            })
            //刷新列表
            CallCategoryApi()
         })

        
      })
      .catch(() => {
         ElMessage({
            type: 'info',
            message: '感谢支持：取消成功',
         })
      })
}

// 删除的按钮
const handleClick = (row:any) => {
   console.log(row)
   router.push({ name: 'category-edit', query: ({ id: row.id }) })
}

const currentChange = (val: number) => {
   console.log(`current page: ${val}`)
   pageData.pageNum = val
   //回调列表函数
   CallCategoryApi()
}

// const callTestapi = () => { 
//    axios({
//       url: 'http://localhost:8080/api/test',
//       method: 'get'
//    }).then((res) => { 
//       console.log(res);
      
//    }).catch((error) => { 
//       console.log(error);
      
//    }).finally(() => { 
//       console.log("一直会执行的代码，无论是报错还是正确信息都执行");
      
//    })
//    axios.get('http://localhost:8080/api/test', {
//       params: {
//          id:192
//       }
//    }).then(res => { 
//       console.log(res);
//    })

// }

</script>
<style scoped>
.demo-form-inline{
   margin-top: 20px;
}
.el-input{
   width: 120px;
}
</style>